<!DOCTYPE html>
<html lang="zh">
<head>
    <title>chat - BotMan => Push Anything To Anywhere</title>
    <style>
        body {
            margin: 0;
            padding-bottom: 3rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        #form {
            background: rgba(0, 0, 0, 0.15);
            padding: 0.25rem;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            height: 3rem;
            box-sizing: border-box;
            backdrop-filter: blur(10px);
        }

        #input {
            border: none;
            padding: 0 1rem;
            flex-grow: 1;
            border-radius: 2rem;
            margin: 0.25rem;
        }

        #input:focus {
            outline: none;
        }

        #form > button {
            background: #333;
            border: none;
            padding: 0 1rem;
            margin: 0.25rem;
            border-radius: 3px;
            outline: none;
            color: #fff;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages > li {
            padding: 0.5rem 1rem;
        }

        #messages > li:nth-child(odd) {
            background: #efefef;
        }
    </style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
    <input id="input" autocomplete="off"/>
    <button>Send</button>
</form>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.0/socket.io.min.js"></script> -->

<!-- <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"
        integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k"
        crossorigin="anonymous"></script> -->

<!-- import {io, Manager} from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js"; -->

<!-- 使用 2.5.0 版本 适配 netty-socketio 这个库 -->
<script src="https://cdn.bootcss.com/socket.io/2.5.0/socket.io.js"></script>

<script>

    // 拼接请求参数对象
    const userId = 'anviplc_for_chat'
    const clientId = 110120
    var opts = {
        query: 'userId=' + userId + '&' + 'clientId=' + clientId,
        transports: ['websocket'], // 传输模式定为 websocket 会比 polling 稳点 更不易掉线 更稳定【和服务端代码对应上 com/lc/mySocketIO/SocketConfig.java:88】
    };

    // const socket = io();
    // const socket = io('ws://localhost:9090?userId=anviplc_for_chat');
    // const socket = io('http://localhost:9090?userId=anviplc_for_chat');
    // 目前使用传入参数对象的方式 初始化 socket
    const socket = io('http://localhost:9090', opts);

    console.log("..........................");

    socket.on('connect', function () {
        console.log("连接成功");
        console.log("connect socket.connected => ", socket.connected); // true
    });

    socket.on('disconnect', function (reason) {
        console.log("disconnect reason", reason);
        console.log("disconnect");
        console.log("disconnect socket.connected => ", socket.connected); // true
    });

    socket.on("error", (error) => {
        console.log(error);
    });

    socket.on("reconnect", (attempt) => {
        console.log(attempt);
    });

    socket.on("reconnect_attempt", (attempt) => {
        console.log(attempt);
    });

    socket.on("reconnect_error", (error) => {
        console.log(error);
    });

    const messages = document.getElementById('messages');
    const form = document.getElementById('form');
    const input = document.getElementById('input');

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        if (input.value) {
            socket.emit('botManChatFromHTML', input.value);
            input.value = '';
        }
    });

    socket.on('message', function (msg) {
        console.log(msg);
    });

    socket.on('data', function (msg) {
        console.log(msg);
    });

    // 从服务端 botManChatFromServer 事件转发来的
    socket.on('botManChatFromServer', function (msg) {
        console.log('botManChatFromServer => ', msg)
        var item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
    });
</script>

</body>
</html>
